<template>

  <view>
    <nut-navbar
      @on-click-back="back"
      @on-click-title="title"
      @on-click-right="rightClick"
      title="疼痛管理"
    >
      <template #right>
      <nut-icon class="right" name="search" @click="toMessage">
      </nut-icon>
      <nut-icon class="right" name="order"></nut-icon>
      </template>
    </nut-navbar>
  </view>

  <view>
    <nut-menu>
      <nut-menu-item v-model="state.value1" :options="state.options1" />
      <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
      <!-- <nut-menu-item v-model="state.value3" @change="handleChange" :options="state.options3" /> -->
      <nut-menu-item title="筛选" ref="item">
      <div :style="{display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center'}">
        <div :style="{ marginRight: '10px'}">管理方式</div>
        <div>居家管理</div>
        <div>居家管理</div>
        <div>居家管理</div>
        <nut-button @click="onConfirm">重置</nut-button>
        <nut-button @click="onConfirm">确认</nut-button>
      </div>
    </nut-menu-item>
    </nut-menu>
  </view>


  <!-- <view class="index">
    <view>
      <img src="" alt="">
    </view>
    {{ msg }}
    <view class="btn">
      <nut-button type="primary" @click="handleClick('text', msg2, true)">点我</nut-button>
    </view>
    <nut-toast :msg="msg" v-model:visible="show" :type="type" :cover="cover" />
  </view> -->
  <!-- <nut-switch v-model="checked" /> -->

  

</template>

<script>
import { reactive, toRefs, ref } from 'vue';
// taro
import { Navbar,Icon,Tabs, TabPane, Switch } from '@nutui/nutui-taro';
import { url } from 'inspector';
import { log } from 'console';
import { method, union } from 'lodash';
import { useRouter } from '@tarojs/taro';
export default {
  name: 'Index',
  components: {
    
  },
  setup(){
    const router = useRouter();
    const state = reactive({
      msg: '欢迎使用 NutUI3.0 开发小程序',
      msg2: '你成功了～',
      type: 'text',
      show: false,
      cover: false,

      options1: [
        { text: '位置', value: 0 },
        { text: '在院', value: 1 },
        { text: '居家', value: 2 }
      ],
      options2: [
        { text: '默认排序', value: 'a' },
        { text: '输注进度排序', value: 'b' },
        { text: '无效次数排序', value: 'c' },
        { text: '泵电量排序', value: 'd' },
      ],
      options3: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
      value1: 0,
      value2: 'a',
      value3: 'b'
    });

    const handleClick = (type, msg, cover = false) => {
      state.show = true;
      state.msg2 = msg;
      state.type = type;
      state.cover = cover;
    };

    const checked = ref(true);

    const handleChange = val => {
      console.log('val', val);
    }

    const toMessage = () => {
      console.log('跳转到详情页')
      console.log('router.path', router)
    }

    return {
      ...toRefs(state),
      handleClick,
      checked,
      state,
      handleChange,
      toMessage
    }
  }
}
</script>

<style lang="scss">
.index {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>
